<template>
<div class="page-school fc">
  <div class="header fr mb-20">
    <div class="f1 fr">
      <div class="item fr ac mt-20">
        <img src="../../../assets/img/p：：圆角矩形 1226 拷贝@2x.png" style="width: 32px;">
        <span>2020-09-11 10:30</span>
      </div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/imgCity/header_icon_internet.png" style="width: 24px;">
        <span>网络：连接成功</span>
      </div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/imgCity/header_icon_data.png" style="width: 30px;">
        <span>云数据库：连接成功</span>
      </div>
    </div>
    <div class="f2 fajc text">广州市体温监测动态感知大数据平台</div>
    <div class="f1 fr">
      <div class="f1"></div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/imgCity/header_icon_business.png" style="width: 30px;">
        <span>业务系统：连接成功</span>
      </div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/img/ren@2x.png" style="width: 28px;">
        <span>广州市教育局</span>
      </div>
      <div class="btn a mt-20"></div>
      <div class="btn a mt-20" @click="fullScreen"></div>
    </div>
  </div>
  <div class="fr jsb p-72 mb-30">
    <div class="top-info fr ac pr">
      <div class="f1 fr ac"><i class="icon icon_1"></i>风险等级: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_2"></i>累计测温人数: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_3"></i>确诊人数: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_4"></i>疑似人数: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_5"></i>康复人数: 123</div>
      <div class="corner lt"></div>
      <div class="corner rt"></div>
      <div class="corner rb"></div>
      <div class="corner lb"></div>
      <div class="light t"></div>
      <div class="light r"></div>
      <div class="light b"></div>
      <div class="light l"></div>
    </div>
    <div class="top-info fr ac pr">
      <div class="f1 fr ac"><i class="icon icon_6"></i>医疗隔离: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_7"></i>居家隔离: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_8"></i>停课班级: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_9"></i>复课班级: 123</div>
      <div class="divider"></div>
      <div class="f1 fr ac"><i class="icon icon_10"></i>消杀次数: 123</div>
      <div class="corner lt"></div>
      <div class="corner rt"></div>
      <div class="corner rb"></div>
      <div class="corner lb"></div>
      <div class="light t"></div>
      <div class="light r"></div>
      <div class="light b"></div>
      <div class="light l"></div>
    </div>
  </div>
  <div class="f1 content fr">
    <div class="left mr-40">
      <com-left-line :chart-data="d"
                     label="全市每日医疗隔离人员统计"
                     :symbol="leftLine[0].symbol"
                     :line-color="leftLine[0].lineColor"
                     :area-color="leftLine[0].areaColor"/>
      <com-left-line :chart-data="d"
                     label="全市每日居家隔离人员统计"
                     :symbol="leftLine[1].symbol"
                     :line-color="leftLine[1].lineColor"
                     :area-color="leftLine[1].areaColor"/>
      <com-left-line :chart-data="d"
                     label="全市每日疑似测温人数统计"
                     :symbol="leftLine[2].symbol"
                     :line-color="leftLine[2].lineColor"
                     :area-color="leftLine[2].areaColor"/>
      <com-left-line :chart-data="d"
                     label="全市每日核酸检测人数统计"
                     :symbol="leftLine[2].symbol"
                     :line-color="leftLine[2].lineColor"
                     :area-color="leftLine[2].areaColor"/>
      <com-left-two-bar :chart-data="d"/>
      <com-left-two-line :chart-data="d"/>
      <com-left-bottom :chart-data="d"/>
    </div>
    <div class="center f1">
      <com-center-map/>
      <com-center-line :chart-data="d"/>
      <com-center-bar :chart-data="d"/>
    </div>
    <div class="right ml-40">
      <com-right-bar :chart-data="d2" label="全市各区县确诊预览"/>
      <com-right-bar :chart-data="d2" label="全市各区县疑似预览"/>
      <com-right-bar :chart-data="d2" label="全市各区县康复预览"/>
      <com-right-list :chart-data="d3" label="全市各学校确诊预览"/>
      <com-right-list :chart-data="d3" label="全市各学校疑似预览"/>
      <com-right-list :chart-data="d3" label="全市各学校康复预览"/>
    </div>
  </div>
</div>
</template>

<script>
import comLeftLine from './components/com-left-line'
import comLeftTwoBar from './components/com-left-two-bar'
import comLeftTwoLine from './components/com-left-two-line'
import comLeftBottom from './components/com-left-bottom'
import comCenterLine from './components/com-center-line'
import comCenterMap from './components/com-center-map'
import comCenterBar from './components/com-center-bar'
import comRightBar from './components/com-right-bar'
import comRightList from './components/com-right-list'

export default {
  name: 'page-city',
  components: { comLeftLine, comLeftTwoBar, comLeftTwoLine, comLeftBottom, comCenterMap, comCenterLine, comCenterBar, comRightBar, comRightList },
  data () {
    return {
      d: [
        { date: '08/07', count: 200 },
        { date: '08/08', count: 300 },
        { date: '08/09', count: 100 },
        { date: '08/10', count: 500 },
        { date: '08/11', count: 10 },
        { date: '08/12', count: 20 },
        { date: '08/13', count: 200 }
      ],
      d2: [
        { name: '黄浦区', count: 100 },
        { name: '白云区', count: 80 },
        { name: '天河区', count: 70 },
        { name: '同化区', count: 60 },
        { name: '花都区', count: 34 },
        { name: '荔湾区', count: 30 },
        { name: '海珠区', count: 27 },
        { name: '南沙区', count: 22 },
        { name: '番禺区', count: 20 },
        { name: '越秀区', count: 15 },
        { name: '增城区', count: 12 },
        { name: '从化区', count: 7 }
      ],
      d3: [
        { name: '广东工业大学', date: '2020/9/26', count: 9 },
        { name: '南方医科大学', date: '2020/9/26', count: 18 },
        { name: '广东财经大学', date: '2020/9/26', count: 20 },
        { name: '广州中医药大学', date: '2020/9/26', count: 2 }
      ],
      leftLine: [
        {
          symbol: 'image://',
          lineColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0.35,
              color: '#F7618B'
            }, {
              offset: 0.72,
              color: '#2B7BFF'
            }]
          },
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0.35, color: 'rgba(198, 37, 255, .2)'
            }, {
              offset: 0.72, color: 'rgba(0, 95, 255, 0)'
            }]
          }
        },
        {
          symbol: 'image://',
          lineColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#FF7300' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#FFFF87' // 100% 处的颜色
            }]
          },
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(255, 132, 0, .2)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255, 216, 0, 0)' // 100% 处的颜色
            }]
          }
        },
        {
          label: '123',
          symbol: 'image://',
          lineColor: '#0BFFFE',
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(184, 204, 255, .2)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(17, 254, 255, 0)' // 100% 处的颜色
            }]
          }
        }
      ]
    }
  },
  methods: {
    fullScreen () {
      const isFullscreen = document.fullscreenElement
      if (!isFullscreen) {
        document.documentElement.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    }
  }
}
</script>

<style lang="less">
.page-school {width: 100%;height: 100%;line-height: 2em;background: url("../../../assets/imgCity/bg.png") center/100% no-repeat;
  .header {height: 136px;padding: 0 72px;background: #0A1917 url("../../../assets/imgCity/header_bg.png") top center/auto 136px no-repeat;color: #06FFFE;font-size: 32px;
    .item {font-family: PingFangSC-Regular;
      img {margin-right: 12px;}
      + .item {margin-left: 38px;}
      + .btn {margin-left: 74px;}
    }
    .text {font-size: 86px;font-family: PangMenZhengDao;color: #0BFFFE;}
    .btn {width: 32px;height: 32px;background: no-repeat center/100%;align-self: center;
      &:last-child {background-image: url("../../../assets/img/全屏@2x.png");}
      &:nth-last-child(2) {background-image: url("../../../assets/img/设置@2x.png");}
      + .btn {margin-left: 46px;}
    }
  }
  .p-72 {padding: 0 72px;}
  .top-info {
    width: 3756px;height: 80px;background-color: #102526;font: bold 32px PingFangSC-Regular;color: #FFFFFF;position: relative;overflow: hidden;
    .icon {width: 60px;height: 44px;background: no-repeat center;margin-right: 18px;margin-left: 210px;
      &.icon_1 {background-image: url("../../../assets/img/p：：形状_1181@2x.png");background-size: 36px;}
      &.icon_2 {background-image: url("../../../assets/img/p：：形状_1213@2x.png");background-size: 60px 36px;}
      &.icon_3 {background-image: url("../../../assets/img/p：：形状_1213@2x(1).png");background-size: 36px 42px;}
      &.icon_4 {background-image: url("../../../assets/img/p：：形状_1214@2x.png");background-size: 36px;}
      &.icon_5 {background-image: url("../../../assets/img/p：：形状_1215@2x.png");background-size: 36px 44px;}
      &.icon_6 {background-image: url("../../../assets/img/p：：形状_1216@2x.png");background-size: 36px 42px;}
      &.icon_7 {background-image: url("../../../assets/img/p：：形状_1217@2x.png");background-size: 44px 36px;}
      &.icon_8 {background-image: url("../../../assets/img/p：：班级@2x.png");background-size: 44px 34px;}
      &.icon_9 {background-image: url("../../../assets/img/p：：形状_1220@2x.png");background-size: 36px;}
      &.icon_10 {background-image: url("../../../assets/img/p：：形状_1219@2x.png");background-size: 28px 38px;}
    }
    .divider {width: 2px;height: 32px;background-color: #FFFFFF;}
    .corner {position: absolute;width: 26px;height: 26px;border: 2px solid #1AFFF8;
      &.lt {border-right: 0;border-bottom: 0;left: 0;top: 0;}
      &.rt {border-left: 0;border-bottom: 0;right: 0;top: 0;}
      &.rb {border-left: 0;border-top: 0;right: 0;bottom: 0;}
      &.lb {border-right: 0;border-top: 0;left: 0;bottom: 0;}
    }
    .light {position: absolute;z-index: 2;
      &.t {top: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(90deg,transparent,#1AFFF8);animation: lr 2s linear infinite;}
      &.r {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg,transparent,#1AFFF8);animation: tb 2s linear infinite;animation-delay: .5s;}
      &.b {bottom: 0;right: 0;width: 100%;height: 2px;background: linear-gradient(270deg,transparent,#1AFFF8);animation: rl 2s linear infinite;animation-delay: 1s;}
      &.l {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg,transparent,#1AFFF8);animation: bt 2s linear infinite;animation-delay: 1.5s;}
    }
  }
  .content {padding: 0 72px 72px;}
  .left, .right {width: 2184px;display: grid;}
  .left {grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);grid-gap: 42px 40px;}
  .center {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(4, 1fr);grid-gap: 42px 40px;}
  .right {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 1fr);grid-gap: 42px;}

  @keyframes lr{0%{left:-100%}50%,100%{left:100%}}
  @keyframes tb{0%{top:-100%}50%,100%{top:100%}}
  @keyframes rl{0%{right:-100%}50%,100%{right:100%}}
  @keyframes bt{0%{bottom:-100%}50%,100%{bottom:100%} }
}
</style>
